<template>
	<view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules" border>
			<uni-group>
				<uni-forms-item label="收货人" required name="name">
					<uni-easyinput v-model="formData.name" placeholder="收货人姓名" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="phone">
					<uni-easyinput type="number" v-model="formData.phone" placeholder="收货人手机号" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="所在地区" required name="areaCode">
					<uni-data-picker :localdata="cityData" v-model="formData.areaCode" @change="changeCity"
						popup-title="请选择城市" :border="false">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="详细地址" required name="address">
					<uni-easyinput v-model="formData.address" placeholder="请填写详细地址" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="门牌号">
					<uni-easyinput v-model="formData.doorplate" placeholder="街道/门牌号等" :inputBorder="false" />
				</uni-forms-item>
			</uni-group>
			<uni-group>
				<uni-forms-item label="地址标签">
					<uni-data-checkbox mode="tag" v-model="formData.tagCode" :localdata="tags" selectedColor="#fde6e9"
						selectedTextColor="#ee0a24">
					</uni-data-checkbox>
				</uni-forms-item>
			</uni-group>
			<uni-group>
				<uni-forms-item label="设为默认收货地址" label-width="300">
					<switch :checked="formData.isDefault" @change="formData.isDefault=!formData.isDefault"
						color="#c3a769" style="transform:scale(0.7)" />
				</uni-forms-item>
			</uni-group>
		</uni-forms>
		<view class="employ radius-btn" @click="submit">保存并使用</view>
		<view class="radius-btn" v-if="cid" @click="delCnee(cid)">删除收货地址</view>

	</view>
</template>

<script>
	// 导入省市区json数据
	import cityData from "../../utils/china-city.json";
	import {
		mapState
	} from 'vuex';
	export default {
		name: "edit-address",
		props: {
			cid: {
				type: String
			}
		},
		data() {
			return {
				formData: {
					name: '', // 收货人姓名
					phone: Number, // 手机号
					areaCode: '', // 地区代码
					city: '', // 地区名
					address: '', // 详细地址
					doorplate: '', // 门牌号/街道
					tagCode: Number, // 收货信息标签索引
					tag: '', // 标签名
					isDefault: false, // 是否默认地址
					_id: '', // 信息数据id
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请填写收货人姓名',
							},
							{
								minLength: 1,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写收货人手机号',
						}, {
							pattern: '^1(3\\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\\d|9[0-35-9])\\d{8}$',
							errorMessage: '请填写正确的手机号码'
						}]
					},
					userArea: {
						rules: [{
							required: true,
							errorMessage: '请填写收货人地区',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请填写详细地址',
						}]
					}
				},
				tags: [{
					value: 0,
					text: '家'
				}, {
					value: 1,
					text: '公司'
				}, {
					value: 2,
					text: '学校'
				}, {
					value: 3,
					text: '其它'
				}],
				cityData
			};
		},
		computed: {
			...mapState({
				cneeList: ({
					user
				}) => user.cneeList
			})
		},
		watch: {
			'formData.tagCode'(newVal) {
				if (typeof newVal == 'number') {
					this.formData.tag = this.tags[newVal].text;
				}
			},
			cid(newVal) {
				console.log('new', newVal)
				let result = this.cneeList.filter(item => item._id == newVal);
				if (result.length > 0) {
					this.formData = result[0];
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate(async (err, reuslt) => {
					// 如果校验成功 ，err 返回 null
					if (err) return;
					let formData = JSON.parse(JSON.stringify(this.formData));
					console.log(this.formData, formData)
					let {
						data: res
					} = await uni.$http.reqUploadCnee(this.user_id, formData);
					if (res.status == 200) {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
						this.goBackPages()
					}
				})
			},
			// 删除收货信息
			delCnee(cid) {
				uni.showModal({
					title: '确定删除该收货信息吗？',
					success(res) {
						if (res.confirm) {
							uni.$http.reqDeleteCnee(cid).then((val) => {
								this.goBackPages();
							})
						}
					}
				})
			},
			// 返回前一页面
			goBackPages() {
				this.$store.dispatch('getCneeList');
				uni.navigateBack();
			},
			// 获取地区名称
			changeCity({
				detail
			}) {
				let city = detail.value.reduce((preVal, currVal) => {
					return preVal + currVal.text;
				}, '');
				this.formData.city = city;
			}
		}
	}
</script>

<style lang="scss">
	.radius-btn {
		margin: 30rpx 30rpx 0;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #fff;

		&:active {
			opacity: 0.5;
		}
	}

	.employ {
		margin-top: 60rpx;
		color: #fff;
		background-color: $my-tawny;
	}
</style>
